import React, {
    Component
} from 'react';

import Tree from 'bee-tree';
import 'bee-tree/build/Tree.css';

import Icon from 'bee-icon';
import 'bee-icon/build/Icon.css';

import './tree.less'
const TreeNode = Tree.TreeNode;

import cloneDeep from 'lodash.clonedeep';

import FormControl from 'bee-form-control';
import 'bee-form-control/build/FormControl.css';

const defaultProps = {
    
}
class TreeCard extends Component {
    constructor(props) {
        super(props);
        const keys = this.props.keys;
        this.state = {
            defaultExpandedKeys:[],
            expandedKeys: [],
            selectedKeys: [],
            treeData: {},
            treeNodeBtnIsClick: true,
            oleTreeData: {},
            mapTreeData: {}
        };
        this.output = {
            setTreeData: this.setTreeData,
            getTreeData: this.getTreeData,
            resetTreeData: this.resetTreeData,
            setTreeExpandedKeys: this.setTreeExpandedKeys,
            getTreeExpandedKeys: this.getTreeExpandedKeys,
            setTreeSelectedKeys: this.setTreeSelectedKeys,
            getTreeSelectedKeys: this.getTreeSelectedKeys,
            getTreeNodeDataByKey: this.getTreeNodeDataByKey,
            setTreeNodeIsClick: this.setTreeNodeIsClick,
            setEmptyTreeExpandedKeys: this.setEmptyTreeExpandedKeys
        }
    }
    componentDidMount() {
        let btnFns = this.btn.output ? this.btn.output : {};
        this.output = {...this.output, ...btnFns}
    }
    setTreeData = ({ data, isCache = true, callBack }) => {
        let mapTreeData = this.setMapTreeData(data)
        let state = { treeData: data, mapTreeData };
        isCache && (state.oleTreeData = cloneDeep(data));
        this.setState({ ...state }, () => {
            callBack && callBack()
        })
    }
    setTreeNodeIsClick = (treeNodeBtnIsClick) => {
        this.setState({
            treeNodeBtnIsClick
        })
    }
    setMapTreeData = (data) => {
        let { treeNodeKey, childKey } = this.props;
        let mapTreeData = {};
        mapTreeData[data[treeNodeKey]] = data;
        data[childKey] && Array.isArray(data[childKey]) && data[childKey].length > 0 && this.setMapTreeChildData(mapTreeData, data)
        return mapTreeData
    }
    setMapTreeChildData = (mapTreeData, data) => {
        let { childKey, treeNodeKey } = this.props;
        data[childKey].forEach((item) => {
            mapTreeData[item[treeNodeKey]] = item
            item[childKey] && Array.isArray(item[childKey]) && item[childKey].length > 0 && this.setMapTreeChildData(mapTreeData, item)
        })
    }
    getTreeData = () => {
        let { treeData, oleTreeData, mapTreeData, selectedKeys } = this.state
        return {
            treeData,
            oleTreeData,
            selectedTreeData: mapTreeData[selectedKeys[0]]
        }
    }
    getTreeNodeDataByKey = (selectedKeys) => {
        let { mapTreeData } = this.state
        selectedKeys = selectedKeys? selectedKeys : this.state.selectedKeys
        return mapTreeData[selectedKeys[0]]
    }
    resetTreeData = () => {
        this.setTreeData({ data: this.state.oleTreeData })
    }
    setTreeExpandedKeys = (expandedKeys) => {
        this.setState({
            expandedKeys: expandedKeys,
        }, () => {
                console.log('expandedKeys', this.state.expandedKeys)
        })
    }
    setEmptyTreeExpandedKeys = (expandedKeys) => {
        this.setState({
            expandedKeys: [],
        }, () => {
                console.log('expandedKeys', this.state.expandedKeys)
        })
    }
    getTreeExpandedKeys = () => {
        return this.state.expandedKeys
    }
    setTreeSelectedKeys = (selectedKeys) => {
        this.setState({
            selectedKeys
        })
    }
    getTreeSelectedKeys = () => {
        return this.state.selectedKeys
    }
    onSelect = (selectedKeys) => {
        if (!this.state.treeNodeBtnIsClick) return;
        this.setState({
            selectedKeys
        }, () => {
            let { selectTreeNodeAfter } = this.props;
            selectTreeNodeAfter && selectTreeNodeAfter({ selectedData: this.getTreeNodeDataByKey(this.state.selectedKeys) })
        })
    }

    onDoubleClick = (key, treeNode) => {
        console.log('---onDblClick---', key, '--treeNode--', treeNode);
    }

    onChange = (value) => {
        this.setState({
            searchValue: value,
            autoExpandParent: true,
        });
    }

    treeNodeBtnClick = (e, key, item) => {
        e.stopPropagation();
        if (!this.state.treeNodeBtnIsClick) return;
        let { treeNodeKey } = this.props;
        this.setState({
            selectedKeys: [item[treeNodeKey]]
        }, () => {
            this.props.treeNodeBtnClick && this.props.treeNodeBtnClick({ key, treeNodeData: this.getTreeNodeDataByKey(this.state.selectedKeys) })
        })
    }
    renderTitle = (item) => {
        let { title } = this.props;
        if (Array.isArray(title)) {
            return title.map((itemTitle) => {
                //特殊处理虚拟根节点显示
                if (itemTitle =='scode' && item['scode'] == 'topVirtual') return null;
                return <div className='item-title'>{item[itemTitle]}</div>
            })
        } else {
            return <div className='item-title'>{item[title]}</div>
        }
    }
    creatTreeItem = (key, item) => {
        return <div className='tree-item-node'>
            <div className='tree-item-node-box'>
                {this.renderTitle(item)}
                <div style={{ width: "87px" }}>
                    {
                        this.props.TreeBtnGroup && <this.props.TreeBtnGroup ref={el => this.btn = el} treeNodeBtnIsClick={this.state.treeNodeBtnIsClick} {...this} treeNodeData={item}/>
                    }
                </div>
            </div>
        </div>
    }
    getSelfExpandedAllChildKeys = (e, data, selfExpandedKeys) => {
        const { treeNodeKey, childKey } = this.props;
        data[childKey].forEach( item=> {
            selfExpandedKeys.push(item[treeNodeKey]);
            item[childKey] && item[childKey].length && this.getSelfExpandedAllChildKeys(e, item, selfExpandedKeys)
        })
    }
    getSelfExpandedKeys = (e, selfExpandedKeys) => {
        const { treeNodeKey, childKey } = this.props;
        let data = this.getTreeNodeDataByKey([e.node.props.eventKey])
        selfExpandedKeys.push(data[treeNodeKey]);
        data[childKey] && data[childKey].length && this.getSelfExpandedAllChildKeys(e, data, selfExpandedKeys)
        return selfExpandedKeys
    }
    onExpand = (expandedKeys, e) => {
        let selfExpandedKeys = [],
            newExpandedKeys = [];
        selfExpandedKeys = this.getSelfExpandedKeys(e, selfExpandedKeys)
        expandedKeys.includes(e.node.props.eventKey) && (newExpandedKeys.push(e.node.props.eventKey))
        expandedKeys.forEach(item => {
            if (!selfExpandedKeys.includes(item)) {
                newExpandedKeys.push(item)
            }
        })
        this.setState({
            expandedKeys: newExpandedKeys
        })
    }

    render() {

        const { expandedKeys, selectedKeys, defaultExpandedKeys } = this.state;
        const { treeSearchInput } = this.props;
        return (
            <div className='treeCard-box'>
                {
                    treeSearchInput ? treeSearchInput : null
                }
                <Tree
                    showLine
                    checkStrictly
                    // defaultExpandedKeys={defaultExpandedKeys}
                    expandedKeys={expandedKeys}
                    onExpand={this.onExpand}
                    selectedKeys={selectedKeys}
                    onSelect={this.onSelect}
                    closeIcon={<Icon type="uf-add-s-o" />}
                    openIcon={<Icon type="uf-reduce-s-o" />}
                    showIcon
                    cancelUnSelect={true}
                    onCheck={this.onCheck}
                    onDoubleClick={this.onDoubleClick}
                >
                    {this.renderTreeNode()}
                </Tree>
            </div>

        );
    }
    renderTreeNodeIcon = (renderNodeKey, childData) => {
        const { expandedKeys } = this.state;
        let iconType = ""
        if (childData && Array.isArray(childData) && childData.length > 0) {
            iconType = expandedKeys.includes(renderNodeKey) ? "uf-treefolderopen" : "uf-treefolder"
        } else {
            iconType = 'uf-list-s-o'
        }
        return <Icon type={iconType} />
    }
    renderTreeNode = () => {
        const { treeData } = this.state,
            { title, treeNodeKey, childKey } = this.props;

        return <TreeNode title={this.creatTreeItem(treeData[title], treeData)} key={treeData[treeNodeKey]} icon={this.renderTreeNodeIcon(treeData[treeNodeKey], treeData[childKey])} >
            {
                treeData[childKey] ? this.renderChildTreeNode(treeData[childKey]) : null
            }
        </TreeNode>
    }
    renderChildTreeNode = (ChildData) => {
        const { title, treeNodeKey, childKey } = this.props;
        return ChildData.map((item, index) => {
            return <TreeNode title={this.creatTreeItem(item[title], item)} key={item[treeNodeKey]} icon={this.renderTreeNodeIcon(item[treeNodeKey], item[childKey])} >
                {
                    item[childKey] ? this.renderChildTreeNode(item[childKey]) : null
                }
            </TreeNode>
        })
    }
}

TreeCard.defaultProps = defaultProps;


export default TreeCard;